<template>
  <SnPopup
    mode="bottom"
    v-bind="$attrs"
    v-model="show"
    :round="16"
    bgColor="#f8f8f8"
    :showCancelButton="false"
    :showConfirmButton="false"
  >
    <view class="payment-modal">
      <view class="modal-header">
        <text class="modal-title">请选择收款方式</text>
        <up-icon name="close" size="20" @click="closeModal"></up-icon>
      </view>

      <scroll-view scroll-y class="payment-list-scroll">
        <view v-if="canUseCollectionMethods?.length">
          <view
            v-for="(item, index) in canUseCollectionMethods"
            :key="index"
            class="payment-item"
            :class="{
              selected: selectedCollectionMethod?.id === item?.id,
            }"
            @click="selectedHandle(item)"
          >
            <view class="currency-icon">
              <up-icon
                :name="
                  paymentMethodIconMap.get(item?.method) ||
                  '/static/payIcon/card.svg'
                "
                size="28"
              ></up-icon>
            </view>
            <view class="payment-item-info">
              <text class="payment-item-name"
                >{{ paymentMethodMap.get(item?.method) }}
                {{ `(${item?.real_name})` }}</text
              >
              <text class="payment-item-limit">{{ item?.account }}</text>
            </view>

            <up-icon
              v-if="selectedCollectionMethod?.id === item?.id"
              name="checkmark-circle-fill"
              size="20"
              color="var(--green-color)"
            ></up-icon>
          </view>
          <view v-if="isShowNoList" class="payment-item-no-list">
            <text class="payment-item-no-title"> 不支持的收款方式 </text>
            <view
              v-for="(item, index) in cannotUseCollectionMethods"
              :key="index"
              class="payment-item payment-item-no"
            >
              <view class="currency-icon">
                <up-icon
                  :name="
                    paymentMethodIconMap.get(item?.method) ||
                    '/static/payIcon/card.svg'
                  "
                  size="28"
                ></up-icon>
              </view>
              <view class="payment-item-info">
                <text class="payment-item-name"
                  >{{ paymentMethodMap.get(item?.method) }}
                  {{ `(${item?.real_name})` }}</text
                >
                <text class="payment-item-limit">{{ item?.account }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="payment-item add-collection-method">
          <up-button @click="navigateToAddCollectionMethod">
            去添加收款方式
          </up-button>
        </view>
      </scroll-view>
    </view>
  </SnPopup>
</template>

<script setup>
import { ref, defineExpose, defineProps, defineEmits, computed } from "vue";
import { paymentMethodIconMap, paymentMethodMap } from "@/utils/data";
import SnPopup from "@/components/common/snPopup.vue";

const emit = defineEmits(["confirm"]);

// 币种列表
const props = defineProps({
  collectionMethods: {
    type: Array,
    default: () => [],
  },
  selectedCollectionMethod: {
    type: Object,
    default: () => {},
  },
  isShowNoList: {
    type: Boolean,
    default: false,
  },
});

//可以用的收款方式
const canUseCollectionMethods = computed(() => {
  if (props.isShowNoList) {
    return props.collectionMethods.filter((item) => item.method === 1);
  } else {
    return props.collectionMethods;
  }
});

//不可以用的收款方式
const cannotUseCollectionMethods = computed(() => {
  return props.collectionMethods.filter((item) => [2, 3].includes(item.method));
});

const show = ref(false);

const navigateToAddCollectionMethod = () => {
  uni.navigateTo({
    url: "/pages/collectionMethods/collectionMethods",
  });
};

const openModal = () => {
  show.value = true;
};

const closeModal = () => {
  show.value = false;
};

// 选择支付方式
const selectedHandle = (item) => {
  closeModal();
  emit("confirm", item);
};

defineExpose({
  openModal,
  closeModal,
});
</script>

<style lang="scss" scoped>
.payment-modal {
  padding: 32rpx;
  max-height: 60vh;
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .modal-title {
      font-size: var(--font-size-md);
      font-weight: 500;
    }
  }

  .payment-list-scroll {
    flex: 1;
    overflow-y: auto;

    .payment-item {
      display: flex;
      align-items: center;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      padding: 16rpx;

      &:last-child {
        border-bottom: none;
      }

      &.selected {
        background-color: #fff7e6;
      }

      .payment-item-info {
        flex: 1;
        padding-left: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        .payment-item-name {
          display: block;
          font-size: var(--font-size-md);
          margin-bottom: 4rpx;
        }

        .payment-item-limit {
          font-size: var(--font-size-xs);
          color: var(--text-secondary);
        }
      }
    }
    .payment-item-no-list {
      filter: grayscale(100%);
      .payment-item-no-title {
        font-size: var(--font-size-md);
        padding: 20rpx 0;
        display: block;
        color: var(--text-secondary);
      }
      .payment-item-no {
        background-color: var(--bg-grey-light);
        color: var(--text-secondary);
      }
      .currency-icon {
        color: var(--text-orange);
      }
    }
    .add-collection-method {
      padding: 0;
      margin-bottom: 16rpx;
    }
  }
}
</style>
